<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Basic Controls in Mono Winforms</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Winforms, Mono, C#, basic controls, programming, tutorial">
<meta name="description" content="Basic Controls in Mono Winforms">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href=".." title="Home">Contents</a>


<h1>Basic Controls in Mono Winforms</h1>


<p>
This part of the Mono Winforms programming tutorial will be about basic controls. 
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 

<p>
Winforms controls are basic building blocks of an application. Winforms has a 
wide range of various controls.Buttons, check boxes, sliders, list boxes etc. 
Everything a programmer needs for his job. In this section of the tutorial, we 
will describe several useful controls.
</p>


<h2>Label Control</h2>

<p>
<b class="keyword">Label</b> is a simple control for displaying text or images. 
It does not receive focus.
</p>


<div class="codehead">label.cs</div>
<pre class="code">
using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {

   string text = @"Sometimes I feel I've got to
Run away I've got to
Get away
From the pain that you drive
    into the heart of me
The love we share
Seems to go nowhere
I've lost my lights
I toss and turn I can't sleep at night

Once I ran to you (I ran)
Now I'll run from you
This tainted love you've given
I give you all a boy could give you
Take my tears and that's not nearly all
Tainted love
Tainted love";

    public MForm() {
        Text = "Tainted Love";

        Font font = new Font("Serif", 10);

        Label lyrics = new Label();
        lyrics.Parent = this;
        lyrics.Text = text;
        lyrics.Font = font;
        lyrics.Location = new Point(10, 10);
        lyrics.Size = new Size (290, 290);

        CenterToScreen();

    }
}

class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}
</pre>


<p>
In our example, we show lyrics of Tainted Love song. 
</p>

<pre class="explanation">
 Label lyrics = new Label();
</pre>

<p>
<b class="keyword">Label</b> control is created.
</p>

<pre class="explanation">
 string text = @"Sometimes I feel I've got ... 
</pre>

<p>
The @ character is used to denote a multiline string. 
</p>

<pre class="explanation">
 Font font = new Font("Serif", 10);
 ...
 lyrics.Font = font;
</pre>

<p>
The font of the text of the label is set to Serif, 10px. 
</p>


<br>
<img src="/img/gui/sharpwinf/label.png" alt="Label">
<div class="figure">Figure: Label</div>


<h2>CheckBox</h2>

<p>
<b class="keyword">CheckBox</b> is a control that has two states. On and Off. 
It is a box with a label or an image.  If the CheckBox is checked, it is represented 
by a tick in a box. A CheckBox can be used to show/hide splashscreen at startup, 
toggle visibility of a toolbar etc.
</p>

<div class="codehead">checkbox.cs</div>
<pre class="code">
using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {

    private CheckBox cb;

    public MForm() {
        Text = "CheckBox";
        Size = new Size(220, 170);

        cb = new CheckBox();
        cb.Parent = this;
        cb.Location = new Point(30, 30);
        cb.Text = "Show Title";
        cb.Checked = true;

        cb.CheckedChanged += new EventHandler(OnChanged);

        CenterToScreen();
    }

    void OnChanged(object sender, EventArgs e) {
        if (cb.Checked) {
            Text = "CheckBox";
        } else {
            Text = "";
        }
    }
}

class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}
</pre>

<p>
Our code example shows or hides the title of the window depending on it's state. 
</p>

<pre class="explanation">
 cb = new CheckBox();
</pre>

<p>
<b class="keyword">CheckBox</b> control is created. 
</p>

<pre class="explanation">
 cb.Text = "Show Title";
 cb.Checked = true;
</pre>

<p>
When the application starts, we show the title. And we set the 
<b class="keyword">CheckBox</b> control to checked state. 
</p>

<pre class="explanation">
 cb.CheckedChanged += new EventHandler(OnChanged);
</pre>

<p>
When we click on the  <b class="keyword">CheckBox</b> control, the 
<b class="keyword">CheckedChanged</b> event is triggered.
</p>

<pre class="explanation">
 if (cb.Checked) {
     Text = "CheckBox";
 } else {
     Text = "";
 }
</pre>

<p>
Here we toggle the title of the window.
</p>

<br>
<img src="/img/gui/sharpwinf/checkbox.png" alt="CheckBox">
<div class="figure">Figure: CheckBox</div>


<h2>TrackBar</h2>

<p>
<b class="keyword">TrackBar</b> is a component that lets the user graphically 
select a value by sliding a knob within a bounded interval.
Our example will show a volume control. 
</p>

<div class="codehead">trackbar.cs</div>
<pre class="code">
using System;
using System.Drawing;
using System.Windows.Forms;


class MForm : Form {
 
    PictureBox pb;
    TrackBar tb;
    Bitmap mute, min, med, max;

    public MForm() {
        Text = "TrackBar";
        Size = new Size(260, 190);

        tb = new TrackBar();
        tb.Parent = this;
        tb.Size = new Size(160, 30);
        tb.Location = new Point(20, 40);
        tb.TickStyle = TickStyle.None;

        tb.ValueChanged += new EventHandler(OnChanged);
        
        LoadImages();

        pb = new PictureBox();
        pb.Parent = this;
        pb.Location = new Point(210, 50);
        pb.Image = mute;
        
        CenterToScreen();

    }

    void LoadImages() {
        mute = new Bitmap("mute.png");
        min = new Bitmap("min.png");
        med = new Bitmap("med.png");
        max = new Bitmap("max.png");
    }


    void OnChanged(object sender, EventArgs e) {
        int val = tb.Value;

        if (val == 0) {
            pb.Image = mute;
        } else if (val > 0 &amp;&amp; val &lt;= 3) {
            pb.Image = min;
        } else if (val > 3 &amp;&amp; val &lt; 8) {
            pb.Image = med;
        } else {
            pb.Image = max;
        }
    }
}

class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}
</pre>

<p>
In the code example, we show a <b class="keyword">TrackBar</b> and a 
<b class="keyword">PictureBox</b>. By dragging the track bar, we change 
the image on the <b class="keyword">PictureBox</b> control. 
</p>


<pre class="explanation">
 tb = new TrackBar();
</pre>

<p>
<b class="keyword">TrackBar</b> control is created.  
</p>

<pre class="explanation">
 tb.TickStyle = TickStyle.None;
</pre>

<p>
We show no ticks for this <b class="keyword">TrackBar</b>.
</p>

<pre class="explanation">
 pb = new PictureBox();
 ...
 pb.Image = mute;
</pre>

<p>
PictureBox control is created. It is used to display an image. 
At the start, it shows the mute image. 
</p>


<pre class="explanation">
 void LoadImages() {
     mute = new Bitmap("mute.png");
     min = new Bitmap("min.png");
     med = new Bitmap("med.png");
     max = new Bitmap("max.png");
 }
</pre>

<p>
Here we load four images, that we will use. 
</p>

<pre class="explanation">
 int val = tb.Value;

 if (val == 0) {
     pb.Image = mute;
 } else if (val > 0 &amp;&amp; val &lt;= 3) {
     pb.Image = min;
 } else if (val > 3 &amp;&amp; val &lt; 8) {
     pb.Image = med;
 } else {
     pb.Image = max;
 }
</pre>

<p>
We determine the value of the <b class="keyword">TrackBar</b>. Depending on its 
value, we update the <b class="keyword">PictureBox</b> control.
</p>


<br>
<img src="/img/gui/sharpwinf/trackbar.png" alt="TrackBar">
<div class="figure">Figure: TrackBar</div>


<h2>ComboBox</h2>

<p>
<b class="keyword">ComboBox</b> is a control that combines a button or 
editable field and a drop-down list. The user can select a value from 
the drop-down list, which appears at the user's request. 
If you make the combo box editable, then the combo box includes an
editable field into which the user can type a value.
</p>

<div class="codehead">combobox.cs</div>
<pre class="code">
using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {

    private ComboBox cb;
    private Label label;

    public MForm() {
        Text = "ComboBox";
        Size = new Size(240, 240);

        cb = new ComboBox();
        cb.Parent = this;
        cb.Location = new Point(50, 30);

        cb.Items.AddRange(new object[] {"Ubuntu",
            "Mandriva",
            "Red Hat",
            "Fedora",
            "Gentoo"});

        cb.SelectionChangeCommitted += new EventHandler(OnChanged);

        label = new Label();
        label.Location = new Point(50, 140);
        label.Parent = this;
        label.Text = "...";

        CenterToScreen();
    }

    void OnChanged(object sender, EventArgs e) {
         ComboBox combo = (ComboBox) sender;
         label.Text = combo.Text;
    }
}


class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}
</pre>

<p>
Our code programming example shows a combobox with five items. The selected
item is shown in a label control. 
</p>


<pre class="explanation">
 cb = new ComboBox();
</pre>

<p>
<b class="keyword">ComboBox</b> control is created. 
</p>


<pre class="explanation">
 cb.Items.AddRange(new object[] {"Ubuntu",
     "Mandriva",
     "Red Hat",
     "Fedora",
     "Gentoo"});
</pre>

<p>
The <b class="keyword">ComboBox</b> control is filled with items. 
</p>

<pre class="explanation">
 cb.SelectionChangeCommitted += new EventHandler(OnChanged);
</pre>

<p>
If we select an item from the combobox, the <b class="keyword">SelectionChangeCommitted</b> event
is triggered. 
</p>

<pre class="explanation">
 void OnChanged(object sender, EventArgs e) {
     ComboBox combo = (ComboBox) sender;
     label.Text = combo.Text;
 }
</pre>

<p>
Here the selected text from the combobox is copied to the label. 
</p>

<br>
<img src="/img/gui/sharpwinf/combobox.png" alt="ComboBox">
<div class="figure">Figure: ComboBox</div>


<h2>MonthCalendar</h2>

<p>
In the next example, we will show a <b class="keyword">MonthCalendar</b> control. 
The MonthCalendar control allows the user to select a date using a visual display.
</p>

<div class="codehead">monthcalendar.cs</div>
<pre class="code">
using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {

   private MonthCalendar calendar;
   private Label date;

    public MForm() {
        Text = "Month Calendar";
        Size = new Size(240, 240);

        calendar = new MonthCalendar();
        calendar.Parent = this;
        calendar.Location = new Point(20, 20);
        calendar.DateSelected += new DateRangeEventHandler(OnSelected);

        date = new Label();
        date.Location = new Point(40, 170);
        date.Parent = this;
        DateTime dt = calendar.SelectionStart;
        date.Text = dt.Month + "/" + dt.Day + "/" + dt.Year;

        CenterToScreen();
    }

    void OnSelected(object sender, EventArgs e) {
        DateTime dt = calendar.SelectionStart;
        date.Text = dt.Month + "/" + dt.Day + "/" + dt.Year;
    }
}


class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}
</pre>

<p>
In the example, we show a <b class="keyword">MonthCalendar</b> and a <b class="keyword">Label</b>.
</p>

<pre class="explanation">
  private MonthCalendar calendar;
  private Label date;
</pre>

<p>
We have two controls. A <b class="keyword">MonthCalendar</b> and a <b class="keyword">Label</b>. 
The latter shows the currently
selected date. 
</p>

<pre class="explanation">
 void OnSelected(object sender, EventArgs e) {
     DateTime dt = calendar.SelectionStart;
     date.Text = dt.Month + "/" + dt.Day + "/" + dt.Year;
  }
</pre>

<p>
When we select a date from the <b class="keyword">MonthCalendar</b>, 
the <b class="keyword">OnSelected()</b> method is called. The <b class="keyword">SelectionStart</b> 
property gets the start date of the selected range of dates. 
</p>


<br>
<img src="/img/gui/sharpwinf/calendar.png" alt="MonthCalendar">
<div class="figure">Figure: MonthCalendar</div>


<h2>TextBox</h2>

<p>
The <b class="keyword">TextBox</b> control is used to display or accept some text. 
The text can be single or multiline. This control is also capable of password masking. 
</p>

<div class="codehead">textbox.cs</div>
<pre class="code">
using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {

    private Label text;

    public MForm() {
        Text = "TextBox";
        Size = new Size(250, 200);
        CenterToScreen();

        text = new Label();
        text.Parent = this;
        text.Text = "...";
        text.Location = new Point(60, 40);
        text.AutoSize = true;

        TextBox tbox = new TextBox();
        tbox.Parent = this;
        tbox.Location = new Point(60, 100);
        tbox.KeyUp += new KeyEventHandler(OnKeyUp);

    }

    void OnKeyUp(object sender, KeyEventArgs e) {
        TextBox tb = (TextBox) sender;
        this.text.Text = tb.Text;
    }
}

class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}
</pre>

<p>
This example shows a text box and a label. The text that we key in the text box 
is displayed immediately in the label control. 
</p>


<pre class="explanation">
 text = new Label();
 ...
 text.AutoSize = true;
</pre>

<p>
The <b class="keyword">Label</b> control is created. The <b class="keyword">AutoSize</b> 
property ensures, that the Label
grows to show the text.  
</p>

<pre class="explanation">
 TextBox tbox = new TextBox();
 ...
 tbox.KeyUp += new KeyEventHandler(OnKeyUp);
</pre>

<p>
We plug in the <b class="keyword">KeyUp</b> event. When we release the key, 
<b class="keyword">OnKeyUp()</b> method is called. 
</p>


<pre class="explanation">
 void OnKeyUp(object sender, KeyEventArgs e) {
     TextBox tb = (TextBox) sender;
     this.text.Text = tb.Text;
 }
</pre>

<p>
In the <b class="keyword">OnKeyUp()</b> method we update the label control with 
the text from the text box control. 
</p>


<br>
<img src="/img/gui/sharpwinf/textbox.png" alt="TextBox">
<div class="figure">Figure: TextBox</div>

<hr class="btm">

<p>
We have finished chapter of the Mono Winforms tutorial, dedicated to basic controls. 
</p>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified December 30, 2008  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

